<template>
  <div class="my-team-page">
    <div class="team-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>我的团队</h1>
        <p class="subtitle">管理您的团队，邀请学生，发布作业</p>
      </div>

      <!-- 功能卡片区域 -->
      <div class="feature-cards">
        <!-- 创建团队卡片 -->
        <div class="feature-card create-team">
          <div class="card-icon">
            <span class="icon">🏆</span>
          </div>
          <div class="card-content">
            <h3>创建团队</h3>
            <p>创建新的学习团队，组织学生进行协作学习</p>
            <button @click="handleCreateTeam" class="action-btn create-btn">
              <span class="btn-icon">➕</span>
              创建团队
            </button>
          </div>
        </div>

        <!-- 发布作业卡片 -->
        <div class="feature-card assign-homework">
          <div class="card-icon">
            <span class="icon">📝</span>
          </div>
          <div class="card-content">
            <h3>发布作业</h3>
            <p>为团队成员发布编程作业和练习任务</p>
            <button @click="handleAssignHomework" class="action-btn homework-btn">
              <span class="btn-icon">📤</span>
              发布作业
            </button>
          </div>
        </div>
      </div>

      <!-- 团队列表区域 -->
      <div class="team-list-section">
        <div class="section-header">
          <h2>我的团队列表</h2>
          <button @click="refreshTeamList" class="refresh-btn">
            <span>🔄 刷新</span>
          </button>
        </div>

        <div class="team-list">
          <!-- 团队卡片 -->
          <div v-for="team in teams" :key="team.id" class="team-card">
            <div class="team-header">
              <div class="team-avatar">
                <span>{{ getTeamInitial(team.name) }}</span>
              </div>
              <div class="team-info">
                <h4>
                  {{ team.name }}
                  <span class="team-id">ID: {{ team.id }}</span>
                </h4>
                <p class="team-desc">{{ team.description }}</p>
              </div>
            </div>
            <div class="team-actions">
              <button @click="viewTeamHomework(team)" class="homework-btn">
                <i class="fas fa-tasks"></i>
                查看班级作业
              </button>
              <button @click="manageTeam(team)" class="manage-btn">
                <i class="fas fa-users-cog"></i>
                管理班级
              </button>
              <button @click="inviteStudent(team)" class="detail-btn">邀请学生</button>
              <button @click="deleteTeam(team)" class="delete-btn">删除团队</button>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="teams.length === 0" class="empty-state">
            <span class="empty-icon">📦</span>
            <p>还没有团队，快去创建一个吧！</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建团队对话框 -->
    <div v-if="showCreateDialog" class="dialog-overlay" @click.self="closeCreateDialog">
      <div class="dialog-container">
        <div class="dialog-header">
          <h3>创建团队</h3>
          <button @click="closeCreateDialog" class="close-btn">✕</button>
        </div>
        
        <div class="dialog-body">
          <div class="form-group">
            <label class="form-label">
              <span class="required">*</span> 团队名称
            </label>
            <input
              v-model="createForm.teamName"
              type="text"
              class="form-input"
              placeholder="请输入团队名称"
              maxlength="50"
            />
            <div v-if="formErrors.teamName" class="error-text">{{ formErrors.teamName }}</div>
          </div>

          <div class="form-group">
            <label class="form-label">
              <span class="required">*</span> 团队简介
            </label>
            <textarea
              v-model="createForm.teamDescription"
              class="form-textarea"
              placeholder="请输入团队简介"
              rows="4"
              maxlength="200"
            ></textarea>
            <div v-if="formErrors.teamDescription" class="error-text">{{ formErrors.teamDescription }}</div>
          </div>

          <div class="form-group">
            <label class="form-label">限制人数</label>
            <input
              v-model.number="createForm.memberLimit"
              type="number"
              class="form-input"
              placeholder="请输入限制人数（选填）"
              min="1"
              max="1000"
            />
            <div class="form-hint">不填写则不限制人数</div>
          </div>
        </div>

        <div class="dialog-footer">
          <button @click="closeCreateDialog" class="cancel-btn">取消</button>
          <button @click="submitCreateTeam" class="submit-btn" :disabled="isSubmitting">
            <span v-if="isSubmitting">创建中...</span>
            <span v-else>确认创建</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 邀请学生对话框 -->
    <div v-if="showInviteDialog" class="dialog-overlay" @click.self="closeInviteDialog">
      <div class="dialog-container">
        <div class="dialog-header">
          <h3>邀请学生到团队</h3>
          <button @click="closeInviteDialog" class="close-btn">✕</button>
        </div>
        
        <div class="dialog-body">
          <div v-if="currentTeam" class="team-info-box">
            <span class="info-icon">🏆</span>
            <div class="info-text">
              <strong>{{ currentTeam.name }}</strong>
              <span class="info-desc">{{ currentTeam.description }}</span>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">
              <span class="required">*</span> 学生账号
            </label>
            <textarea
              v-model="inviteForm.studentAccounts"
              class="form-textarea"
              placeholder="请输入学生账号，每行一个账号&#10;&#10;示例：&#10;student001&#10;student002&#10;student003"
              rows="8"
            ></textarea>
            <div class="form-hint">
              💡 提示：每行输入一个学生账号，支持批量邀请
            </div>
            <div v-if="parsedStudentAccounts.length > 0" class="accounts-preview">
              <strong>将邀请 {{ parsedStudentAccounts.length }} 名学生：</strong>
              <div class="accounts-list">
                <span v-for="(account, index) in parsedStudentAccounts.slice(0, 10)" :key="index" class="account-tag">
                  {{ account }}
                </span>
                <span v-if="parsedStudentAccounts.length > 10" class="more-tag">
                  ...还有 {{ parsedStudentAccounts.length - 10 }} 个
                </span>
              </div>
            </div>
            <div v-if="formErrors.studentAccounts" class="error-text">{{ formErrors.studentAccounts }}</div>
          </div>
        </div>

        <div class="dialog-footer">
          <button @click="closeInviteDialog" class="cancel-btn">取消</button>
          <button @click="submitInviteStudents" class="submit-btn" :disabled="isSubmitting || parsedStudentAccounts.length === 0">
            <span v-if="isSubmitting">邀请中...</span>
            <span v-else>确认邀请 ({{ parsedStudentAccounts.length }})</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 管理班级弹窗 -->
    <div v-if="showManageDialog" class="modal-overlay" @click.self="closeManageDialog">
      <div class="modal-container manage-team-modal">
        <div class="modal-header">
          <div class="modal-title-section">
            <i class="fas fa-users-cog"></i>
            <h3>管理班级 - {{ currentManagedTeam?.name }}</h3>
          </div>
          <button @click="closeManageDialog" class="modal-close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <!-- 班级统计信息 -->
          <div class="team-stats">
            <div class="stat-item">
              <div class="stat-icon students">
                <i class="fas fa-user-graduate"></i>
              </div>
              <div class="stat-info">
                <h4>{{ studentList.length }}</h4>
                <p>学生总数</p>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon active">
                <i class="fas fa-check-circle"></i>
              </div>
              <div class="stat-info">
                <h4>{{ activeStudents }}</h4>
                <p>活跃学生</p>
              </div>
            </div>
          </div>
          
          <!-- 学生列表 -->
          <div class="students-section">
            <div class="students-header">
              <h4>👨‍🎓 学生列表</h4>
              <div class="students-actions">
                <button @click="refreshStudents" class="refresh-students-btn" :disabled="isLoadingStudents">
                  <i class="fas fa-sync-alt" :class="{ 'fa-spin': isLoadingStudents }"></i>
                  刷新
                </button>
              </div>
            </div>
            
            <div v-if="isLoadingStudents" class="loading-students">
              <i class="fas fa-spinner fa-spin"></i>
              <p>加载中...</p>
            </div>
            
            <div v-else-if="studentList.length > 0" class="students-table-container">
              <table class="students-table">
                <thead>
                  <tr>
                    <th>姓名</th>
                    <th>账号ID</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="student in studentList" :key="student.id">
                    <td>
                      <div class="student-name-cell">
                        <div class="student-avatar-small">
                          {{ getStudentInitial(student.name) }}
                        </div>
                        <span>{{ student.name }}</span>
                      </div>
                    </td>
                    <td>{{ student.accountId }}</td>
                    <td>
                      <div class="action-buttons-cell">
                        <button @click="openTransferDialog(student)" class="transfer-btn">
                          <i class="fas fa-exchange-alt"></i>
                          换班
                        </button>
                        <button @click="deleteStudent(student)" class="delete-student-btn">
                          <i class="fas fa-trash"></i>
                          删除
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <div v-else class="empty-students">
              <i class="fas fa-user-slash"></i>
              <p>该班级暂无学生</p>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button @click="closeManageDialog" class="modal-btn secondary">关闭</button>
        </div>
      </div>
    </div>

    <!-- 学生换班弹窗 -->
    <div v-if="showTransferDialog" class="modal-overlay" @click.self="closeTransferDialog">
      <div class="modal-container transfer-modal">
        <div class="modal-header">
          <div class="modal-title-section">
            <i class="fas fa-exchange-alt"></i>
            <h3>学生换班</h3>
          </div>
          <button @click="closeTransferDialog" class="modal-close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <!-- 学生信息 -->
          <div v-if="currentTransferStudent" class="transfer-info">
            <div class="info-row">
              <span class="info-label">学生姓名：</span>
              <span class="info-value">{{ currentTransferStudent.name }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">账号ID：</span>
              <span class="info-value">{{ currentTransferStudent.accountId }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">当前班级：</span>
              <span class="info-value">{{ currentManagedTeam?.name }}</span>
            </div>
          </div>
          
          <!-- 目标班级选择 -->
          <div class="transfer-form">
            <label class="form-label">
              <span class="required">*</span> 转入班级
            </label>
            <select v-model="transferForm.targetTeamId" class="form-select">
              <option value="">请选择目标班级</option>
              <option 
                v-for="team in teams.filter(t => t.id !== currentManagedTeam?.id)" 
                :key="team.id" 
                :value="team.id"
              >
                {{ team.name }}
              </option>
            </select>
          </div>
        </div>
        
        <div class="modal-footer">
          <button @click="closeTransferDialog" class="modal-btn secondary">取消</button>
          <button @click="confirmTransfer" class="modal-btn primary" :disabled="!transferForm.targetTeamId || isTransferring">
            <span v-if="isTransferring">转班中...</span>
            <span v-else>确认转班</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 班级作业列表弹窗 -->
    <div v-if="showHomeworkDialog" class="modal-overlay" @click.self="closeHomeworkDialog">
      <div class="modal-container homework-modal">
        <div class="modal-header">
          <div class="modal-title-section">
            <i class="fas fa-tasks"></i>
            <h3>班级作业 - {{ currentHomeworkTeam?.name }}</h3>
          </div>
          <button @click="closeHomeworkDialog" class="modal-close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <!-- 作业统计 -->
          <div class="homework-stats">
            <div class="stat-item">
              <div class="stat-icon homework-total">
                <i class="fas fa-clipboard-list"></i>
              </div>
              <div class="stat-info">
                <h4>{{ homeworkList.length }}</h4>
                <p>作业总数</p>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon homework-active">
                <i class="fas fa-hourglass-half"></i>
              </div>
              <div class="stat-info">
                <h4>{{ activeHomeworkCount }}</h4>
                <p>进行中</p>
              </div>
            </div>
          </div>
          
          <!-- 加载状态 -->
          <div v-if="isLoadingHomework" class="loading-homework">
            <i class="fas fa-spinner fa-spin"></i>
            <p>加载作业中...</p>
          </div>
          
          <!-- 作业列表 -->
          <div v-else-if="homeworkList.length > 0" class="homework-cards-section">
            <div class="homework-cards-grid">
              <div v-for="homework in homeworkList" :key="homework.id" class="homework-card">
                <div class="homework-card-header">
                  <h4 class="homework-title">{{ homework.title || homework.name || '无标题作业' }}</h4>
                  <span class="homework-status-badge" :class="getHomeworkStatusClass(homework)">
                    {{ getHomeworkStatus(homework) }}
                  </span>
                </div>
                
                <div class="homework-card-body">
                  <div class="homework-info-row" v-if="homework.description">
                    <i class="fas fa-align-left"></i>
                    <span>{{ homework.description }}</span>
                  </div>
                  <div class="homework-info-row" v-if="homework.startTime">
                    <i class="fas fa-calendar-alt"></i>
                    <span>开始：{{ formatDate(homework.startTime) }}</span>
                  </div>
                  <div class="homework-info-row" v-if="homework.deadline">
                    <i class="fas fa-clock"></i>
                    <span>截止：{{ formatDate(homework.deadline) }}</span>
                  </div>
                </div>
                
                <div class="homework-card-footer">
                  <button @click="viewHomeworkProgress(homework)" class="view-progress-btn">
                    <i class="fas fa-chart-line"></i>
                    查看作业进展
                  </button>
                  <button @click="earlyEndHomework(homework)" class="early-end-btn">
                    <i class="fas fa-stop-circle"></i>
                    提前结束作业
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-homework">
            <i class="fas fa-inbox"></i>
            <p>该班级暂无作业</p>
          </div>
        </div>
        
        <div class="modal-footer">
          <button @click="closeHomeworkDialog" class="modal-btn secondary">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 作业排名弹窗 -->
    <div v-if="showRankDialog && rankData" class="modal-overlay" @click.self="closeRankDialog">
      <div class="modal-container rank-modal">
        <div class="modal-header">
          <div class="modal-title-section">
            <i class="fas fa-trophy"></i>
            <h3>{{ rankData.homeworkTitle }} - 班级排名</h3>
          </div>
          <button @click="closeRankDialog" class="modal-close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <!-- 作业基本信息 -->
          <div class="rank-info-section">
            <div class="info-item">
              <span class="label">班级名称：</span>
              <span class="value">{{ rankData.teamName }}</span>
            </div>
            <div class="info-item">
              <span class="label">提交人数：</span>
              <span class="value">{{ rankData.rankList ? rankData.rankList.filter(s => s.totalScore > 0).length : 0 }} / {{ rankData.rankList ? rankData.rankList.length : 0 }}</span>
            </div>
          </div>
          
          <!-- 排名列表 -->
          <div class="rank-list-section">
            <h4 class="section-title">📊 学生排名</h4>
            
            <div v-if="rankData.rankList && rankData.rankList.length > 0" class="rank-table-wrapper">
              <table class="rank-table">
                <thead>
                  <tr>
                    <th rowspan="2">排名</th>
                    <th rowspan="2">学生姓名</th>
                    <th rowspan="2">总分</th>
                    <th rowspan="2">总耗时</th>
                    <!-- 动态生成题目代号列 -->
                    <th v-for="qIndex in getQuestionCount()" :key="'q-header-' + qIndex" class="question-header">
                      {{ getQuestionLabel(qIndex - 1) }}
                    </th>
                    <th rowspan="2">操作</th>
                  </tr>
                  <tr class="stats-row">
                    <!-- 动态生成题目统计信息行 -->
                    <th v-for="qIndex in getQuestionCount()" :key="'q-stats-' + qIndex" class="question-stats-header">
                      {{ getQuestionStats(qIndex - 1) }}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(student, index) in sortedRankList" :key="student.studentId" 
                      :class="{ 'top-rank': getRealRank(index) <= 3 && hasSubmitted(student), 'submitted': hasSubmitted(student), 'no-submit': !hasSubmitted(student) }">
                    <td>
                      <span class="rank-number">
                        <!-- 🔥 提交了作业的学生前3名显示奖牌 -->
                        <span v-if="hasSubmitted(student) && getRealRank(index) === 1" class="medal gold">🥇</span>
                        <span v-else-if="hasSubmitted(student) && getRealRank(index) === 2" class="medal silver">🥈</span>
                        <span v-else-if="hasSubmitted(student) && getRealRank(index) === 3" class="medal bronze">🥉</span>
                        <!-- 🔥 所有学生都显示排名序号 -->
                        <span v-else>{{ index + 1 }}</span>
                      </span>
                    </td>
                    <td class="student-name">{{ student.studentName }}</td>
                    <td class="score-cell">
                      <span :class="['score-value', getScoreClass(student.totalScore, rankData.totalFullScore)]">
                        {{ student.totalScore }} 分
                      </span>
                    </td>
                    <td>{{ formatTime(student.totalTime) }}</td>
                    <!-- 动态生成每道题的得分列 -->
                    <td v-for="qIndex in getQuestionCount()" :key="'q-score-' + qIndex" class="question-score-cell-single">
                      <span v-if="student.questionScores && student.questionScores[qIndex - 1]" 
                            :class="['question-score-single', getQuestionScoreClass(student.questionScores[qIndex - 1].score, student.questionScores[qIndex - 1].fullScore)]">
                        {{ student.questionScores[qIndex - 1].score }}/{{ student.questionScores[qIndex - 1].fullScore }}
                      </span>
                      <span v-else class="no-score-text">-</span>
                    </td>
                    <td class="action-cell">
                      <button 
                        @click="viewStudentCode(student)" 
                        class="view-code-btn"
                        title="查看学生代码">
                        <i class="fas fa-code"></i>
                        查看代码
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <div v-else class="empty-rank">
              <i class="fas fa-inbox"></i>
              <p>暂无排名数据</p>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button @click="closeRankDialog" class="modal-btn secondary">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 学生代码查看弹窗 -->
    <div v-if="showCodeDialog" class="modal-overlay" @click.self="closeCodeDialog">
      <div class="modal-container code-modal">
        <div class="modal-header">
          <div class="modal-title-section">
            <i class="fas fa-code"></i>
            <h3>学生提交代码</h3>
          </div>
          <button @click="closeCodeDialog" class="modal-close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <div v-if="loadingCode" class="loading-section">
            <i class="fas fa-spinner fa-spin"></i>
            <p>加载中...</p>
          </div>
          
          <div v-else-if="studentCodeData" class="code-content">
            <!-- 学生基本信息 -->
            <div class="student-info-section">
              <div class="info-item">
                <span class="label">学生姓名：</span>
                <span class="value">{{ studentCodeData.studentName }}</span>
              </div>
              <div class="info-item">
                <span class="label">作业标题：</span>
                <span class="value">{{ studentCodeData.homeworkTitle }}</span>
              </div>
              <div class="info-item">
                <span class="label">总分：</span>
                <span class="value score-highlight">{{ studentCodeData.totalScore }}</span>
              </div>
              <div class="info-item">
                <span class="label">总耗时：</span>
                <span class="value">{{ formatTimeMs(studentCodeData.totalTime) }}</span>
              </div>
            </div>
            
            <!-- 每道题的代码 -->
            <div class="questions-code-section">
              <h4 class="section-title">📝 各题目提交代码</h4>
              
              <div v-for="(question, index) in studentCodeData.questionScores" 
                   :key="question.testQuestionId" 
                   class="question-code-card">
                <div class="code-card-header">
                  <div class="header-left">
                    <span class="question-number">第 {{ index + 1 }} 题</span>
                    <span class="question-name">{{ question.questionName }}</span>
                  </div>
                  <div class="header-right">
                    <span class="score-badge" :class="getScoreBadgeClass(question.score, question.fullScore)">
                      {{ question.score }} / {{ question.fullScore }} 分
                    </span>
                  </div>
                </div>
                
                <div v-if="question.codeContent" class="code-content-wrapper">
                  <div class="code-header">
                    <span class="code-label">提交的代码：</span>
                    <button @click="copyStudentCode(question.codeContent, index)" class="copy-code-btn">
                      <i class="fas fa-copy"></i> 复制代码
                    </button>
                  </div>
                  <pre class="code-block"><code>{{ question.codeContent }}</code></pre>
                </div>
                
                <div v-else class="no-code-message">
                  <i class="fas fa-info-circle"></i>
                  <p>该题未提交代码</p>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="no-data-message">
            <i class="fas fa-inbox"></i>
            <p>暂无数据</p>
          </div>
        </div>
        
        <div class="modal-footer">
          <button @click="closeCodeDialog" class="modal-btn secondary">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { teamApi } from '@/api'
import * as homeworkApi from '@/api/homework'
import logger from '../utils/logger.js'

export default {
  name: 'MyTeam',
  data() {
    return {
      teams: [],
      showCreateDialog: false,
      showInviteDialog: false,
      currentTeam: null,
      isSubmitting: false,
      createForm: {
        teamName: '',
        teamDescription: '',
        memberLimit: ''
      },
      inviteForm: {
        studentAccounts: ''
      },
      formErrors: {},
      
      // 管理班级相关
      showManageDialog: false,
      currentManagedTeam: null,
      studentList: [],
      isLoadingStudents: false,
      
      // 学生换班相关
      showTransferDialog: false,
      currentTransferStudent: null,
      transferForm: {
        targetTeamId: ''
      },
      isTransferring: false,
      
      // 班级作业相关
      showHomeworkDialog: false,
      currentHomeworkTeam: null,
      homeworkList: [],
      isLoadingHomework: false,
      
      // 作业排名相关
      showRankDialog: false,
      rankData: null,
      
      // 学生代码查看相关
      showCodeDialog: false,
      loadingCode: false,
      studentCodeData: null
    }
  },
  computed: {
    // 解析学生账号列表
    parsedStudentAccounts() {
      if (!this.inviteForm.studentAccounts.trim()) {
        return []
      }
      
      // 按行分割，过滤空行和空格
      const accounts = this.inviteForm.studentAccounts
        .split('\n')
        .map(line => line.trim())
        .filter(line => line.length > 0)
      
      // 去重
      return [...new Set(accounts)]
    },
    
    // 活跃学生数量
    activeStudents() {
      return this.studentList.filter(s => s.active).length
    },
    
    // 进行中的作业数量
    activeHomeworkCount() {
      const now = new Date()
      return this.homeworkList.filter(hw => {
        const deadline = hw.deadline ? new Date(hw.deadline) : null
        return deadline && deadline > now
      }).length
    },
    
    // 🔥 排序后的排名列表（提交了作业的学生排前面）
    sortedRankList() {
      if (!this.rankData || !this.rankData.rankList) {
        return []
      }
      
      // 复制数组，避免修改原数据
      const list = [...this.rankData.rankList]
      
      // 排序：提交了作业的学生排前面，然后按总分降序
      return list.sort((a, b) => {
        const aSubmitted = this.hasSubmitted(a)
        const bSubmitted = this.hasSubmitted(b)
        
        // 优先：提交了作业的排前面
        if (aSubmitted && !bSubmitted) return -1
        if (!aSubmitted && bSubmitted) return 1
        
        // 都提交了或都未提交，按总分降序
        return b.totalScore - a.totalScore
      })
    }
  },
  mounted() {
    logger.log('📚 [MyTeam] 我的团队页面已加载');
    this.loadTeamList();
  },
  methods: {
    // 创建团队 - 打开对话框
    handleCreateTeam() {
      logger.log('🏆 打开创建团队对话框');
      this.showCreateDialog = true;
      this.resetCreateForm();
    },

    // 关闭创建团队对话框
    closeCreateDialog() {
      this.showCreateDialog = false;
      this.resetCreateForm();
    },

    // 重置表单
    resetCreateForm() {
      this.createForm = {
        teamName: '',
        teamDescription: '',
        memberLimit: ''
      };
      this.formErrors = {};
      this.isSubmitting = false;
    },

    // 验证表单
    validateForm() {
      this.formErrors = {};
      let isValid = true;

      // 验证团队名称
      if (!this.createForm.teamName || !this.createForm.teamName.trim()) {
        this.formErrors.teamName = '请输入团队名称';
        isValid = false;
      } else if (this.createForm.teamName.trim().length < 2) {
        this.formErrors.teamName = '团队名称至少2个字符';
        isValid = false;
      }

      // 验证团队简介
      if (!this.createForm.teamDescription || !this.createForm.teamDescription.trim()) {
        this.formErrors.teamDescription = '请输入团队简介';
        isValid = false;
      } else if (this.createForm.teamDescription.trim().length < 5) {
        this.formErrors.teamDescription = '团队简介至少5个字符';
        isValid = false;
      }

      return isValid;
    },

    // 提交创建团队
    async submitCreateTeam() {
      if (!this.validateForm()) {
        return;
      }

      if (this.isSubmitting) {
        return;
      }

      try {
        this.isSubmitting = true;
        logger.log('🏆 开始创建团队...');

        const response = await teamApi.createTeam(
          this.createForm.teamName.trim(),
          this.createForm.teamDescription.trim(),
          this.createForm.memberLimit || null
        );

        logger.log('📥 收到后端响应:', response);

        // 检查后端返回的 code 字段
        if (response && response.code === 0) {
          logger.log('✅ 创建团队成功:', response);

          // 关闭对话框
          this.closeCreateDialog();

          // 刷新团队列表
          await this.loadTeamList();
        } else {
          // 后端返回失败
          logger.error('❌ 创建团队失败，后端返回:', response);
          const errorMsg = response?.message || '创建团队失败';
          alert(errorMsg);
        }

      } catch (error) {
        logger.error('❌ 创建团队失败:', error);
        
        let errorMsg = '创建团队失败，请稍后重试';
        if (error.response?.data?.message) {
          errorMsg = error.response.data.message;
        } else if (error.message) {
          errorMsg = error.message;
        }
        
        alert(errorMsg);
      } finally {
        this.isSubmitting = false;
      }
    },

    // 邀请学生
    handleInviteStudent() {
      logger.log('👨‍🎓 邀请学生');
      alert('邀请学生功能待开发中...');
      // TODO: 打开邀请学生对话框
    },

    // 发布作业
    handleAssignHomework() {
      logger.log('📝 发布作业');
      // 跳转到发布作业页面
      this.$router.push('/assign-homework');
    },

    // 加载团队列表
    async loadTeamList() {
      try {
        logger.log('📋 加载团队列表...');
        const response = await teamApi.getMyTeams();
        
        logger.log('📥 收到团队列表响应:', response);
        
        // 检查后端返回的 code 字段
        if (response && response.code === 0 && response.data) {
          const rawTeams = Array.isArray(response.data) ? response.data : [];
          logger.log('📊 原始团队数据:', rawTeams);
          
          // 打印第一个团队的字段，帮助调试
          if (rawTeams.length > 0) {
            logger.log('🔍 第一个团队的字段:', Object.keys(rawTeams[0]));
            logger.log('🔍 第一个团队的完整数据:', rawTeams[0]);
          }
          
          // 映射后端字段到前端期望的字段
          // 后端返回的字段: id, team_name
          this.teams = rawTeams.map(team => ({
            id: team.id,
            name: team.team_name || team.teamName || '未命名团队',
            description: team.team_introduction || team.teamIntroduction || '暂无简介',
            memberCount: team.number_limit || team.numberLimit || team.member_count || 0,
            homeworkCount: team.homework_count || team.homeworkCount || 0,
            createTime: team.create_time || team.createTime || team.createdAt || '-'
          }));
          
          logger.log('✅ 团队列表加载成功（已映射）:', this.teams);
        } else {
          logger.warn('⚠️ 团队列表为空或返回失败:', response);
          this.teams = [];
        }
      } catch (error) {
        logger.error('❌ 加载团队列表失败:', error);
        // 如果接口还未实现，不显示错误
        this.teams = [];
      }
    },

    // 刷新团队列表
    refreshTeamList() {
      logger.log('🔄 刷新团队列表');
      this.loadTeamList();
    },

    // 邀请学生 - 打开对话框
    inviteStudent(team) {
      logger.log('👨‍🎓 邀请学生到团队:', team);
      this.currentTeam = team;
      this.showInviteDialog = true;
      this.resetInviteForm();
    },

    // 关闭邀请学生对话框
    closeInviteDialog() {
      this.showInviteDialog = false;
      this.currentTeam = null;
      this.resetInviteForm();
    },

    // 重置邀请表单
    resetInviteForm() {
      this.inviteForm = {
        studentAccounts: ''
      };
      this.formErrors = {};
    },

    // 提交邀请学生
    async submitInviteStudents() {
      logger.log('📤 提交邀请学生');
      
      // 验证
      if (this.parsedStudentAccounts.length === 0) {
        this.formErrors.studentAccounts = '请至少输入一个学生账号';
        return;
      }

      this.isSubmitting = true;

      try {
        logger.log('👥 准备邀请学生到团队:', this.currentTeam.name);
        logger.log('📋 学生账号列表:', this.parsedStudentAccounts);
        logger.log('🆔 团队ID:', this.currentTeam.id);
        
        // 调用后端API批量邀请学生
        const response = await teamApi.inviteStudents(
          this.currentTeam.id,           // teamId
          this.parsedStudentAccounts     // studentIds (学生账号数组)
        );
        
        logger.log('📥 收到邀请响应:', response);
        logger.log('🔍 检查业务状态码...');
        logger.log('🔍 response.code:', response?.code);
        logger.log('🔍 response.message:', response?.message);
        
        // 🔥 只有当 code === 0 时才是成功
        if (response && response.code === 0) {
          logger.log('✅ 邀请学生成功（code = 0）');
          
          const successMsg = response.message || `成功邀请 ${this.parsedStudentAccounts.length} 名学生加入团队"${this.currentTeam.name}"！`;
          alert('✅ ' + successMsg);
          
          // 关闭对话框并刷新列表
          this.closeInviteDialog();
          this.loadTeamList();
        } else {
          // 🔥 code !== 0，表示邀请失败
          logger.error('❌ 邀请学生失败，业务状态码异常');
          logger.error('❌ code:', response?.code);
          logger.error('❌ message:', response?.message);
          
          const errorMsg = response?.message || '邀请学生失败，请检查学生账号是否正确';
          alert('❌ ' + errorMsg);
          
          // 不关闭对话框，让用户修改后重试
          return;
        }
        
      } catch (error) {
        logger.error('❌ 邀请失败:', error);
        logger.error('📊 错误详情:', {
          status: error.response?.status,
          statusText: error.response?.statusText,
          data: error.response?.data
        });
        
        // 🔥 根据后端返回的实际错误信息显示
        let errorMsg = '邀请学生失败，请稍后重试';
        
        // 尝试从各种可能的位置获取后端错误信息
        if (error.response?.data?.message) {
          errorMsg = error.response.data.message;
        } else if (error.data?.message) {
          errorMsg = error.data.message;
        } else if (error.message) {
          errorMsg = error.message;
        }
        
        logger.error('❌ 显示错误消息:', errorMsg);
        alert('❌ ' + errorMsg);
      } finally {
        this.isSubmitting = false;
      }
    },


    // 查看班级作业
    async viewTeamHomework(team) {
      logger.log('📚 [MyTeam] 查看班级作业:', team)
      this.currentHomeworkTeam = team
      this.showHomeworkDialog = true
      
      // 加载作业列表
      await this.loadTeamHomework(team)
    },
    
    // 关闭作业列表弹窗
    closeHomeworkDialog() {
      this.showHomeworkDialog = false
      this.currentHomeworkTeam = null
      this.homeworkList = []
    },
    
    // 加载班级作业列表
    async loadTeamHomework(team) {
      this.isLoadingHomework = true
      
      try {
        logger.log('📋 [MyTeam] 加载班级作业列表...')
        logger.log('🏫 [MyTeam] 班级名称:', team.name)
        logger.log('🏫 [MyTeam] 班级ID:', team.id)
        
        // 动态导入homework API
        const { getHomeworkByTeamId } = await import('@/api/homework')
        
        // 调用真实API获取班级作业列表
        const response = await getHomeworkByTeamId(team.id)
        
        logger.log('✅ [MyTeam] API调用成功，响应:', response)
        
        if (response && response.code === 0) {
          if (response.data) {
            // 处理作业数据
            const homeworkData = Array.isArray(response.data) ? response.data : (response.data.records || response.data.list || [])
            
            this.homeworkList = homeworkData.map(homework => ({
              id: homework.id,
              title: homework.title || homework.homeworkName || homework.name || '无标题作业',
              description: homework.description || homework.content || '',
              startTime: homework.startTime || homework.createTime,
              deadline: homework.deadline || homework.endTime,
              status: homework.status
            }))
            
            logger.log('✅ [MyTeam] 作业列表加载成功，共', this.homeworkList.length, '个')
            logger.log('📊 [MyTeam] 作业数据:', this.homeworkList)
          } else {
            // 数据为空
            logger.warn('⚠️ [MyTeam] 返回数据为空')
            this.homeworkList = []
          }
        } else {
          // 业务错误
          const errorMsg = response?.message || '获取作业列表失败'
          logger.error('❌ [MyTeam] 业务错误:', errorMsg)
          this.$message?.error?.(errorMsg) || alert(errorMsg)
          this.homeworkList = []
        }
        
      } catch (error) {
        logger.error('❌ [MyTeam] 加载作业列表失败:', error)
        
        let errorMsg = '加载作业列表失败'
        if (error.response?.data?.message) {
          errorMsg = error.response.data.message
        } else if (error.message) {
          errorMsg = error.message
        }
        
        this.$message?.error?.(errorMsg) || alert(errorMsg)
        this.homeworkList = []
      } finally {
        this.isLoadingHomework = false
      }
    },
    
    // 查看作业进展
    async viewHomeworkProgress(homework) {
      logger.log('📊 [MyTeam] 查看作业进展:', homework)
      
      try {
        // 获取作业ID和班级ID
        const homeworkId = String(homework.id || homework.homeworkId)
        const teamId = String(homework.teamId || this.currentHomeworkTeam?.id || this.selectedTeam?.id)
        
        logger.log('🔍 [MyTeam] 调试信息:')
        logger.log('  - homework对象:', homework)
        logger.log('  - homework.teamId:', homework.teamId)
        logger.log('  - currentHomeworkTeam:', this.currentHomeworkTeam)
        logger.log('  - currentHomeworkTeam.id:', this.currentHomeworkTeam?.id)
        
        if (!homeworkId || !teamId || teamId === 'undefined') {
          this.$message?.error?.('作业ID或班级ID获取失败') || alert('作业ID或班级ID获取失败')
          return
        }
        
        logger.log('📋 [MyTeam] 查询参数:')
        logger.log('  - 作业ID:', homeworkId)
        logger.log('  - 班级ID:', teamId)
        
        // 调用查看作业进展接口
        const api = await import('@/api/config')
        const response = await api.default.get('/goc/homework/class-rank', {
          params: {
            homeworkId: homeworkId,
            teamId: teamId
          }
        })
        
        logger.log('✅ [MyTeam] 作业进展数据获取成功:', response)
        
        // 处理响应数据
        if (response && response.code === 0) {
          this.rankData = response.data
          
          // 🔥 对学生排名进行排序
          if (this.rankData && this.rankData.rankList && Array.isArray(this.rankData.rankList)) {
            logger.log('📊 [MyTeam] 开始对学生成绩进行排序...')
            logger.log('📊 [MyTeam] 排序前的数据:', this.rankData.rankList)
            
            // 排序规则：
            // 1. 总分高的排前面
            // 2. 总分相同时，耗时短的排前面
            this.rankData.rankList.sort((a, b) => {
              // 首先按总分降序排列（分数高的在前）
              if (b.totalScore !== a.totalScore) {
                return b.totalScore - a.totalScore
              }
              
              // 总分相同时，按耗时升序排列（时间短的在前）
              // 注意：未提交的学生（totalScore=0）耗时也为0，需要特殊处理
              if (a.totalScore === 0) {
                // 两个都未提交，保持原顺序
                return 0
              }
              
              // 都提交了且分数相同，比较耗时
              return a.totalTime - b.totalTime
            })
            
            logger.log('📊 [MyTeam] 排序后的数据:', this.rankData.rankList)
            logger.log('📊 [MyTeam] 排名详情:')
            this.rankData.rankList.forEach((student, index) => {
              logger.log(`  ${index + 1}. ${student.studentName} - 总分: ${student.totalScore}, 耗时: ${student.totalTime}ms`)
            })
          }
          
          logger.log('📊 [MyTeam] 班级排名数据:', this.rankData)
          
          // 🔥 调用题目提交统计接口
          try {
            logger.log('📊 [MyTeam] 开始调用题目提交统计接口...')
            logger.log('📊 [MyTeam] 作业ID:', homeworkId)
            
            const statsResponse = await api.default.get('/goc/homework/question-submit-stats', {
              params: {
                homeworkId: parseInt(homeworkId)
              }
            })
            
            logger.log('✅ [MyTeam] 题目提交统计数据获取成功:', statsResponse)
            
            // 处理统计数据
            if (statsResponse && statsResponse.code === 0 && statsResponse.data) {
              logger.log('📊 [MyTeam] 题目提交统计:', statsResponse.data)
              // 可以将统计数据存储到 rankData 中，方便在弹窗中使用
              this.rankData.questionStats = statsResponse.data
            } else {
              logger.warn('⚠️ [MyTeam] 题目提交统计获取失败:', statsResponse?.message)
            }
          } catch (statsError) {
            logger.error('❌ [MyTeam] 调用题目提交统计接口失败:', statsError)
            // 统计接口失败不影响主流程，只记录错误
          }
          
          // 打开排名弹窗
          this.showRankDialog = true
        } else {
          const errorMsg = response?.message || '获取作业进展失败'
          this.$message?.error?.(errorMsg) || alert(errorMsg)
        }
        
      } catch (error) {
        logger.error('❌ [MyTeam] 获取作业进展失败:', error)
        
        const errorMessage = error.response?.data?.message || error.message || '获取作业进展失败，请重试'
        this.$message?.error?.(errorMessage) || alert(errorMessage)
      }
    },
    
    // 关闭排名弹窗
    closeRankDialog() {
      this.showRankDialog = false
      this.rankData = null
    },
    
    // 查看学生代码
    async viewStudentCode(student) {
      logger.log('👨‍💻 [MyTeam] 查看学生代码:', student)
      
      try {
        // 🔥 移除0分限制，允许查看所有学生的代码（包括0分的学生）
        // 即使得分为0，学生可能已经提交了代码，教师需要查看以便分析问题
        
        if (!student) {
          const msg = '学生信息获取失败'
          this.$message?.warning?.(msg) || alert(msg)
          return
        }
        
        // 获取作业ID和学生ID
        const homeworkId = this.rankData?.homeworkId
        const studentId = student.studentId
        
        logger.log('📋 [MyTeam] 查看代码参数:')
        logger.log('  - 作业ID:', homeworkId)
        logger.log('  - 学生ID:', studentId)
        logger.log('  - 学生姓名:', student.studentName)
        
        if (!homeworkId || !studentId) {
          const msg = '参数获取失败：作业ID或学生ID为空'
          this.$message?.error?.(msg) || alert(msg)
          return
        }
        
        // 显示弹窗并设置加载状态
        this.showCodeDialog = true
        this.loadingCode = true
        this.studentCodeData = null
        
        // 调用API获取学生作业结果
        logger.log('🔍 [MyTeam] 正在获取学生作业结果...')
        const response = await homeworkApi.getStudentHomeworkResult(homeworkId, studentId)
        
        logger.log('✅ [MyTeam] 学生作业结果获取成功:', response)
        
        // 处理响应数据
        if (response && response.code === 0 && response.data) {
          this.studentCodeData = response.data
          logger.log('📝 [MyTeam] 学生作业数据:', this.studentCodeData)
        } else {
          const errorMsg = response?.message || '获取学生作业结果失败'
          logger.error('❌ [MyTeam] 获取失败:', errorMsg)
          this.$message?.error?.(errorMsg) || alert(errorMsg)
          this.studentCodeData = null
        }
        
      } catch (error) {
        logger.error('❌ [MyTeam] 查看学生代码失败:', error)
        
        let errorMsg = '获取学生作业结果失败'
        if (error.response && error.response.data && error.response.data.message) {
          errorMsg = error.response.data.message
        } else if (error.message) {
          errorMsg = error.message
        }
        
        this.$message?.error?.(errorMsg) || alert(errorMsg)
        this.studentCodeData = null
      } finally {
        this.loadingCode = false
      }
    },
    
    // 关闭学生代码弹窗
    closeCodeDialog() {
      logger.log('🔒 [MyTeam] 关闭学生代码弹窗')
      this.showCodeDialog = false
      this.studentCodeData = null
    },
    
    // 复制代码
    copyStudentCode(code, index) {
      logger.log('📋 [MyTeam] 复制代码，题目索引:', index)
      
      if (!code) {
        const msg = '没有代码可复制'
        this.$message?.warning?.(msg) || alert(msg)
        return
      }
      
      // 创建临时textarea元素
      const textarea = document.createElement('textarea')
      textarea.value = code
      textarea.style.position = 'fixed'
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      
      try {
        // 选择并复制
        textarea.select()
        document.execCommand('copy')
        
        logger.log('✅ [MyTeam] 代码已复制到剪贴板')
        
        // 🔥 显示复制成功提示（1秒后自动关闭）
        if (this.$message && this.$message.success) {
          this.$message.success({
            message: '已复制',
            duration: 1000
          })
        } else {
          this.showAutoCloseMessage('已复制')
        }
      } catch (err) {
        logger.error('❌ [MyTeam] 复制失败:', err)
        const msg = '复制失败，请手动复制'
        this.$message?.error?.(msg) || alert(msg)
      } finally {
        // 移除临时元素
        document.body.removeChild(textarea)
      }
    },
    
    // 格式化时间（毫秒转可读格式）
    formatTimeMs(ms) {
      if (!ms || ms === 0) return '0秒'
      
      const hours = Math.floor(ms / 3600000)
      const minutes = Math.floor((ms % 3600000) / 60000)
      const seconds = Math.floor((ms % 60000) / 1000)
      
      const parts = []
      if (hours > 0) parts.push(`${hours}小时`)
      if (minutes > 0) parts.push(`${minutes}分钟`)
      if (seconds > 0) parts.push(`${seconds}秒`)
      
      return parts.length > 0 ? parts.join(' ') : '0秒'
    },
    
    // 获取成绩标记样式
    getScoreBadgeClass(score, fullScore) {
      if (!fullScore || fullScore === 0) return 'score-zero'
      
      const percentage = (score / fullScore) * 100
      
      if (percentage >= 90) return 'score-excellent'
      if (percentage >= 75) return 'score-good'
      if (percentage >= 60) return 'score-pass'
      if (percentage > 0) return 'score-fail'
      return 'score-zero'
    },
    
    // 提前结束作业
    async earlyEndHomework(homework) {
      logger.log('⏹️ [MyTeam] 提前结束作业:', homework)
      
      const homeworkTitle = homework.title || homework.name || '该作业'
      const confirmed = confirm(`确定要提前结束"${homeworkTitle}"吗？\n作业将立即结束，学生将无法继续提交。`)
      
      if (!confirmed) {
        logger.log('❌ [MyTeam] 用户取消提前结束')
        return
      }
      
      try {
        logger.log('🔥 [MyTeam] 执行提前结束操作，作业ID:', homework.id)
        
        // 动态导入API
        const { earlyEndHomework } = await import('@/api/homework')
        
        // 调用API提前结束作业
        const response = await earlyEndHomework(homework.id)
        
        logger.log('✅ [MyTeam] API响应:', response)
        
        // 检查业务状态码
        if (response && response.code === 0) {
          logger.log('✅ [MyTeam] 作业提前结束成功（code = 0）')
          
          // 重新加载作业列表
          if (this.currentHomeworkTeam) {
            await this.loadTeamHomework(this.currentHomeworkTeam)
          }
        } else {
          logger.error('❌ [MyTeam] 提前结束失败，业务状态码异常')
          logger.error('❌ [MyTeam] code:', response?.code)
          logger.error('❌ [MyTeam] message:', response?.message)
          
          const errorMsg = response?.message || '提前结束作业失败'
          if (this.$message && this.$message.error) {
            this.$message.error(errorMsg)
          } else {
            alert('❌ ' + errorMsg)
          }
        }
      } catch (error) {
        logger.error('❌ [MyTeam] 提前结束作业失败:', error)
        
        let errorMsg = '提前结束作业失败，请重试'
        if (error.response?.data?.message) {
          errorMsg = error.response.data.message
        } else if (error.message) {
          errorMsg = error.message
        }
        
        if (this.$message && this.$message.error) {
          this.$message.error(errorMsg)
        } else {
          alert('❌ ' + errorMsg)
        }
      }
    },
    
    // 格式化时间（毫秒转为可读格式）
    formatTime(milliseconds) {
      if (!milliseconds || milliseconds === 0) return '-'
      
      const seconds = Math.floor(milliseconds / 1000)
      const minutes = Math.floor(seconds / 60)
      const hours = Math.floor(minutes / 60)
      
      if (hours > 0) {
        return `${hours}小时${minutes % 60}分`
      } else if (minutes > 0) {
        return `${minutes}分${seconds % 60}秒`
      } else {
        return `${seconds}秒`
      }
    },
    
    // 获取分数样式类
    getScoreClass(score, fullScore) {
      if (score === 0) return 'score-zero'
      
      const ratio = score / fullScore
      if (ratio >= 0.9) return 'score-excellent'
      if (ratio >= 0.7) return 'score-good'
      if (ratio >= 0.6) return 'score-pass'
      return 'score-fail'
    },
    
    // 获取题目数量
    getQuestionCount() {
      if (!this.rankData || !this.rankData.rankList || this.rankData.rankList.length === 0) {
        return 0
      }
      
      // 找到第一个有题目数据的学生
      const studentWithQuestions = this.rankData.rankList.find(student => 
        student.questionScores && student.questionScores.length > 0
      )
      
      return studentWithQuestions ? studentWithQuestions.questionScores.length : 0
    },
    
    // 获取题目标签（A、B、C等）
    getQuestionLabel(index) {
      return String.fromCharCode(65 + index) // A=65, B=66, C=67...
    },
    
    // 获取题目统计信息（正确提交数/总提交数）
    getQuestionStats(index) {
      // 检查是否有统计数据
      if (!this.rankData || !this.rankData.questionStats || !Array.isArray(this.rankData.questionStats)) {
        return '0/0'
      }
      
      // 获取第一个学生的题目列表，以确定题目ID的对应关系
      if (!this.rankData.rankList || this.rankData.rankList.length === 0) {
        return '0/0'
      }
      
      // 找到第一个有题目数据的学生
      const studentWithQuestions = this.rankData.rankList.find(student => 
        student.questionScores && student.questionScores.length > 0
      )
      
      if (!studentWithQuestions || !studentWithQuestions.questionScores[index]) {
        return '0/0'
      }
      
      // 获取该题目的ID
      const testQuestionId = studentWithQuestions.questionScores[index].testQuestionId
      
      // 在统计数据中查找对应的题目
      const questionStat = this.rankData.questionStats.find(stat => 
        stat.testQuestionId === testQuestionId
      )
      
      if (questionStat) {
        return `${questionStat.correctSubmitCount}/${questionStat.totalSubmitCount}`
      }
      
      return '0/0'
    },
    
    // 🔥 计算学生的真实排名（考虑并列情况）
    getRealRank(index) {
      if (!this.rankData || !this.rankData.rankList) {
        return index + 1
      }
      
      const currentStudent = this.rankData.rankList[index]
      
      // 未提交的学生不显示排名
      if (currentStudent.totalScore === 0) {
        return null
      }
      
      // 计算真实排名：找出有多少学生的成绩比当前学生好
      let rank = 1
      for (let i = 0; i < index; i++) {
        const prevStudent = this.rankData.rankList[i]
        
        // 如果前一个学生的成绩更好（总分更高，或总分相同但耗时更短），排名+1
        if (prevStudent.totalScore > currentStudent.totalScore) {
          rank++
        } else if (prevStudent.totalScore === currentStudent.totalScore && 
                   prevStudent.totalTime < currentStudent.totalTime) {
          rank++
        }
        // 如果总分和耗时都相同，则为并列，不增加排名
      }
      
      return rank
    },
    
    // 获取单题得分样式类
    getQuestionScoreClass(score, fullScore) {
      if (score === 0) return 'question-score-zero'
      
      const ratio = score / fullScore
      if (ratio >= 1) return 'question-score-full'
      if (ratio >= 0.8) return 'question-score-good'
      if (ratio >= 0.6) return 'question-score-pass'
      return 'question-score-fail'
    },
    
    // 获取作业状态文本
    getHomeworkStatus(homework) {
      if (!homework.deadline) return '未设置截止时间'
      
      const now = new Date()
      const deadline = new Date(homework.deadline)
      
      if (deadline > now) {
        return '进行中'
      } else {
        return '已截止'
      }
    },
    
    // 获取作业状态样式类
    getHomeworkStatusClass(homework) {
      if (!homework.deadline) return 'no-deadline'
      
      const now = new Date()
      const deadline = new Date(homework.deadline)
      
      if (deadline > now) {
        return 'ongoing'
      } else {
        return 'ended'
      }
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '-'
      
      try {
        const date = new Date(dateStr)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        
        return `${year}-${month}-${day} ${hours}:${minutes}`
      } catch (error) {
        return dateStr
      }
    },
    
    // 管理班级
    async manageTeam(team) {
      logger.log('⚙️ [MyTeam] 管理班级:', team)
      this.currentManagedTeam = team
      this.showManageDialog = true
      
      // 加载学生列表
      await this.loadStudents(team)
    },
    
    // 关闭管理班级弹窗
    closeManageDialog() {
      this.showManageDialog = false
      this.currentManagedTeam = null
      this.studentList = []
    },
    
    // 加载学生列表
    async loadStudents(team) {
      this.isLoadingStudents = true
      
      try {
        logger.log('📋 [MyTeam] 加载班级学生列表...')
        logger.log('🏫 [MyTeam] 班级名称:', team.name)
        logger.log('🏫 [MyTeam] 班级ID:', team.id)
        
        // 调用真实API获取学生列表
        const response = await teamApi.findAllStuByTeamId(team.id)
        
        logger.log('✅ [MyTeam] API调用成功，响应:', response)
        
        if (response && response.code === 0) {
          if (response.data && Array.isArray(response.data)) {
            // 处理学生数据 - 后端返回 userName 和 id
            this.studentList = response.data.map(student => ({
              id: student.id,
              name: student.userName || student.username || student.name || '未知',
              accountId: student.id || '-' // 学生账号ID就是学生的id
            }))
            
            logger.log('✅ [MyTeam] 学生列表加载成功，共', this.studentList.length, '人')
            logger.log('📊 [MyTeam] 学生数据:', this.studentList)
          } else {
            // 数据格式不正确
            logger.warn('⚠️ [MyTeam] 返回数据格式异常:', response.data)
            this.studentList = []
          }
        } else {
          // 业务错误
          const errorMsg = response?.message || '获取学生列表失败'
          logger.error('❌ [MyTeam] 业务错误:', errorMsg)
          this.$message?.error?.(errorMsg) || alert(errorMsg)
          this.studentList = []
        }
        
      } catch (error) {
        logger.error('❌ [MyTeam] 加载学生列表失败:', error)
        
        let errorMsg = '加载学生列表失败'
        if (error.response?.data?.message) {
          errorMsg = error.response.data.message
        } else if (error.message) {
          errorMsg = error.message
        }
        
        this.$message?.error?.(errorMsg) || alert(errorMsg)
        this.studentList = []
      } finally {
        this.isLoadingStudents = false
      }
    },
    
    // 刷新学生列表
    async refreshStudents() {
      if (this.currentManagedTeam) {
        await this.loadStudents(this.currentManagedTeam)
      }
    },
    
    // 获取学生名字首字母
    getStudentInitial(name) {
      if (!name) return '?'
      return name.charAt(0).toUpperCase()
    },
    
    // 删除学生
    async deleteStudent(student) {
      const confirmed = confirm(`确定要将学生 ${student.name} 从班级 ${this.currentManagedTeam.name} 中移除吗？`)
      
      if (!confirmed) {
        return
      }
      
      try {
        logger.log('🗑️ [MyTeam] 开始删除学生...')
        logger.log('👤 [MyTeam] 学生姓名:', student.name)
        logger.log('👤 [MyTeam] 学生账号ID:', student.accountId)
        logger.log('🏫 [MyTeam] 班级名称:', this.currentManagedTeam.name)
        logger.log('🏫 [MyTeam] 班级ID:', this.currentManagedTeam.id)
        
        // 调用真实API删除学生
        const response = await teamApi.deleteStuFromTeam(
          this.currentManagedTeam.id,  // teamId
          student.accountId              // studentId（学生ID）
        )
        
        logger.log('📥 [MyTeam] 删除学生API响应:', response)
        
        if (response && response.code === 0) {
          logger.log('✅ [MyTeam] 删除学生成功')
          
          // 刷新学生列表
          await this.refreshStudents()
        } else {
          // 业务错误
          const errorMsg = response?.message || '删除学生失败'
          logger.error('❌ [MyTeam] 业务错误:', errorMsg)
          this.$message?.error?.(errorMsg) || alert(errorMsg)
        }
        
      } catch (error) {
        logger.error('❌ [MyTeam] 删除学生失败:', error)
        
        let errorMsg = '删除学生失败，请稍后重试'
        if (error.response?.data?.message) {
          errorMsg = error.response.data.message
        } else if (error.message) {
          errorMsg = error.message
        }
        
        this.$message?.error?.(errorMsg) || alert(errorMsg)
      }
    },
    
    // 打开学生换班弹窗
    openTransferDialog(student) {
      logger.log('🔄 [MyTeam] 打开换班弹窗:', student)
      this.currentTransferStudent = student
      this.showTransferDialog = true
      this.transferForm.targetTeamId = ''
    },
    
    // 关闭学生换班弹窗
    closeTransferDialog() {
      this.showTransferDialog = false
      this.currentTransferStudent = null
      this.transferForm.targetTeamId = ''
    },
    
    // 确认学生换班
    async confirmTransfer() {
      if (!this.transferForm.targetTeamId) {
        this.$message?.warning?.('请选择目标班级') || alert('请选择目标班级')
        return
      }
      
      const targetTeam = this.teams.find(t => t.id === this.transferForm.targetTeamId)
      if (!targetTeam) {
        this.$message?.error?.('目标班级不存在') || alert('目标班级不存在')
        return
      }
      
      const confirmed = confirm(
        `确定要将学生 ${this.currentTransferStudent.name} 从 ${this.currentManagedTeam.name} 转到 ${targetTeam.name} 吗？`
      )
      
      if (!confirmed) {
        return
      }
      
      this.isTransferring = true
      
      try {
        logger.log('🔄 [MyTeam] 开始转班...')
        logger.log('👤 [MyTeam] 学生完整信息:', this.currentTransferStudent)
        logger.log('🏫 [MyTeam] 原班级完整信息:', this.currentManagedTeam)
        logger.log('🏫 [MyTeam] 目标班级完整信息:', targetTeam)
        logger.log('📝 [MyTeam] 表单数据:', this.transferForm)
        
        // 准备API调用参数 - 确保大数ID精度不丢失
        const transferParams = {
          memberId: this.currentTransferStudent.id, // 学生ID (保持原始格式)
          fromTeamId: this.currentManagedTeam.id, // 原班级ID (保持原始格式)
          toTeamId: this.transferForm.targetTeamId // 目标班级ID (保持原始格式)
        }
        
        // 验证ID格式和长度
        logger.log('🔍 [MyTeam] ID验证:')
        logger.log('  - 学生ID原始值:', this.currentTransferStudent.id, '长度:', String(this.currentTransferStudent.id).length)
        logger.log('  - 原班级ID原始值:', this.currentManagedTeam.id, '长度:', String(this.currentManagedTeam.id).length)
        logger.log('  - 目标班级ID原始值:', this.transferForm.targetTeamId, '长度:', String(this.transferForm.targetTeamId).length)
        
        logger.log('📋 [MyTeam] 转班参数详情:')
        logger.log('  - memberId (学生ID):', transferParams.memberId, '(类型:', typeof transferParams.memberId, ')')
        logger.log('  - fromTeamId (原班级ID):', transferParams.fromTeamId, '(类型:', typeof transferParams.fromTeamId, ')')
        logger.log('  - toTeamId (目标班级ID):', transferParams.toTeamId, '(类型:', typeof transferParams.toTeamId, ')')
        logger.log('📋 [MyTeam] 完整参数对象:', transferParams)
        
        // 调用换班接口
        const api = await import('@/api/config')
        const response = await api.default.post('/goc/team/transferMember', transferParams)
        
        logger.log('📥 [MyTeam] 换班API响应:', response)
        
        if (response && response.code === 0) {
          logger.log('✅ [MyTeam] 转班成功')
          
          // 关闭换班弹窗
          this.closeTransferDialog()
          
          // 刷新学生列表
          await this.refreshStudents()
        } else {
          // 业务错误
          const errorMsg = response?.message || '转班失败'
          logger.error('❌ [MyTeam] 转班业务错误:', errorMsg)
          throw new Error(errorMsg)
        }
        
      } catch (error) {
        logger.error('❌ [MyTeam] 转班失败:', error)
        this.$message?.error?.('转班失败，请稍后重试') || alert('转班失败，请稍后重试')
      } finally {
        this.isTransferring = false
      }
    },
    
    // 删除团队
    async deleteTeam(team) {
      logger.log('🗑️ 删除团队:', team);
      
      // 确认删除
      const confirmed = confirm(`确定要删除团队"${team.name}"吗？此操作不可恢复！`);
      
      if (!confirmed) {
        logger.log('❌ 用户取消删除');
        return;
      }

      try {
        logger.log('🗑️ 开始删除团队，ID:', team.id);
        
        const response = await teamApi.deleteTeam(team.id);
        
        logger.log('📥 收到删除响应:', response);
        
        // 检查后端返回的 code 字段
        if (response && response.code === 0) {
          logger.log('✅ 删除团队成功:', response);
          
          // 刷新团队列表
          await this.loadTeamList();
        } else {
          logger.error('❌ 删除团队失败，后端返回:', response);
          const errorMsg = response?.message || '删除团队失败';
          alert(errorMsg);
        }
        
      } catch (error) {
        logger.error('❌ 删除团队失败:', error);
        
        let errorMsg = '删除团队失败，请稍后重试';
        if (error.response?.data?.message) {
          errorMsg = error.response.data.message;
        } else if (error.message) {
          errorMsg = error.message;
        }
        
        alert(errorMsg);
      }
    },

    // 获取团队名称首字母
    getTeamInitial(name) {
      if (!name) return 'T';
      return name.charAt(0).toUpperCase();
    },
    
    // 🔥 判断学生是否已提交作业
    hasSubmitted(student) {
      if (!student) return false
      
      // 判断依据（满足任一条件即认为已提交）：
      // 1. 有总耗时（totalTime > 0）
      // 2. 有题目得分数据（questionScores有内容）
      // 3. 有提交时间（submitTime存在）
      const hasTime = student.totalTime && student.totalTime > 0
      const hasQuestionScores = student.questionScores && Array.isArray(student.questionScores) && student.questionScores.length > 0
      const hasSubmitTime = !!student.submitTime
      
      return hasTime || hasQuestionScores || hasSubmitTime
    },
    
    // 🔥 显示自动关闭的消息提示（1秒后自动关闭）
    showAutoCloseMessage(message) {
      const messageEl = document.createElement('div')
      messageEl.className = 'auto-close-message'
      messageEl.textContent = message
      messageEl.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: #67C23A;
        color: white;
        padding: 12px 24px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
        z-index: 10000;
        font-size: 14px;
        font-weight: 500;
        animation: slideDown 0.3s ease-out;
      `
      
      document.body.appendChild(messageEl)
      
      // 1秒后自动移除
      setTimeout(() => {
        messageEl.style.animation = 'slideUp 0.3s ease-out'
        setTimeout(() => {
          document.body.removeChild(messageEl)
        }, 300)
      }, 1000)
    }
  }
}
</script>

<style scoped>
/* 自动关闭消息提示动画 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

.my-team-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 30px 20px;
}

.team-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-header h1 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 36px;
  font-weight: 700;
}

.subtitle {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
}

/* 功能卡片区域 */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 40px;
}

.create-team .card-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.invite-student .card-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.assign-homework .card-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-content h3 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.card-content p {
  margin: 0 0 24px 0;
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.6;
}

.action-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.create-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.invite-btn {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.homework-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.btn-icon {
  font-size: 18px;
}

/* 团队列表区域 */
.team-list-section {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #4CAF50;
}

.section-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.refresh-btn {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.refresh-btn:hover {
  background: #45a049;
}

.team-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.team-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.team-card:hover {
  border-color: #4CAF50;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.team-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.team-avatar {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  margin-right: 16px;
  flex-shrink: 0;
}

.team-info {
  flex: 1;
}

.team-info h4 {
  margin: 0 0 6px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.team-id {
  font-size: 12px;
  font-weight: 500;
  color: #6c757d;
  background: #e9ecef;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.team-desc {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: white;
  border-radius: 8px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.team-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.homework-btn,
.detail-btn,
.manage-btn,
.delete-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.homework-btn {
  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
  color: white;
}

.homework-btn:hover {
  background: linear-gradient(135deg, #7B1FA2, #6A1B9A);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
}

.homework-btn i {
  font-size: 14px;
}

.detail-btn {
  background: #2196F3;
  color: white;
}

.detail-btn:hover {
  background: #1976D2;
}

.manage-btn {
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: white;
}

.manage-btn:hover {
  background: linear-gradient(135deg, #F57C00, #E65100);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

.manage-btn i {
  font-size: 14px;
}

.delete-btn {
  background: #f44336;
  color: white;
}

.delete-btn:hover {
  background: #d32f2f;
  transform: scale(1.02);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
}

.empty-icon {
  font-size: 64px;
  display: block;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 28px;
  }

  .feature-cards {
    grid-template-columns: 1fr;
  }

  .team-list {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .refresh-btn {
    width: 100%;
  }

  .team-stats {
    grid-template-columns: 1fr;
  }
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dialog-container {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.dialog-header {
  padding: 24px 30px;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: #666;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #e0e0e0;
  color: #333;
}

.dialog-body {
  padding: 30px;
  max-height: 60vh;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: #2c3e50;
  font-weight: 600;
  font-size: 14px;
}

.required {
  color: #f44336;
  margin-right: 4px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.error-text {
  color: #f44336;
  font-size: 12px;
  margin-top: 6px;
}

.form-hint {
  color: #7f8c8d;
  font-size: 12px;
  margin-top: 6px;
}

.dialog-footer {
  padding: 20px 30px;
  border-top: 2px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn,
.submit-btn {
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.cancel-btn:hover {
  background: #e0e0e0;
}

.submit-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  color: white;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* 邀请学生对话框特有样式 */
.team-info-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%);
  border-radius: 12px;
  margin-bottom: 24px;
  border-left: 4px solid #4CAF50;
}

.info-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.info-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-text strong {
  color: #2c3e50;
  font-size: 16px;
}

.info-desc {
  color: #666;
  font-size: 13px;
}

.accounts-preview {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.accounts-preview strong {
  display: block;
  margin-bottom: 12px;
  color: #2c3e50;
  font-size: 14px;
}

.accounts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-tag {
  display: inline-block;
  padding: 6px 12px;
  background: white;
  border: 1px solid #4CAF50;
  border-radius: 20px;
  color: #4CAF50;
  font-size: 13px;
  font-weight: 500;
}

.more-tag {
  display: inline-block;
  padding: 6px 12px;
  background: #e0e0e0;
  border-radius: 20px;
  color: #666;
  font-size: 13px;
  font-style: italic;
}

.form-hint {
  margin-top: 8px;
  color: #999;
  font-size: 13px;
  line-height: 1.5;
}

/* 管理班级弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.manage-team-modal {
  width: 800px;
}

.transfer-modal {
  width: 500px;
}

.homework-modal {
  width: 900px;
}

.modal-header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-section i {
  font-size: 24px;
}

.modal-title-section h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.modal-body {
  padding: 24px;
  max-height: calc(90vh - 180px);
  overflow-y: auto;
}

.modal-footer {
  padding: 16px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.modal-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.modal-btn.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.modal-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-btn.secondary {
  background: #e0e0e0;
  color: #333;
}

.modal-btn.secondary:hover {
  background: #d0d0d0;
}

/* 班级统计信息 */
.team-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.team-stats .stat-item {
  background: linear-gradient(135deg, #f8f9fa, #fff);
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.team-stats .stat-item:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.team-stats .stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.team-stats .stat-icon.students {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.team-stats .stat-icon.active {
  background: linear-gradient(135deg, #4CAF50, #45a049);
}

.team-stats .stat-info h4 {
  margin: 0 0 4px 0;
  font-size: 28px;
  font-weight: 700;
  color: #333;
}

.team-stats .stat-info p {
  margin: 0;
  font-size: 14px;
  color: #999;
}

/* 学生列表区域 */
.students-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
}

.students-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.students-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.students-actions {
  display: flex;
  gap: 8px;
}

.refresh-students-btn {
  padding: 6px 12px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.refresh-students-btn:hover:not(:disabled) {
  border-color: #667eea;
  color: #667eea;
}

.refresh-students-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.loading-students {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.loading-students i {
  font-size: 32px;
  margin-bottom: 12px;
  color: #667eea;
}

.loading-students p {
  margin: 0;
  font-size: 14px;
}

/* 学生表格 */
.students-table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.students-table {
  width: 100%;
  border-collapse: collapse;
}

.students-table thead {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.students-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
}

.students-table tbody tr {
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease;
}

.students-table tbody tr:last-child {
  border-bottom: none;
}

.students-table tbody tr:hover {
  background: #f8f9fa;
}

.students-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
}

.student-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.action-buttons-cell {
  display: flex;
  gap: 8px;
  align-items: center;
}

.transfer-btn,
.delete-student-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.transfer-btn {
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: white;
}

.transfer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

.delete-student-btn {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: white;
}

.delete-student-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

.transfer-btn i,
.delete-student-btn i {
  font-size: 11px;
}

.empty-students {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.empty-students i {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-students p {
  margin: 0;
  font-size: 14px;
}

/* 学生换班弹窗 */
.transfer-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: #666;
  min-width: 100px;
}

.info-value {
  flex: 1;
  color: #333;
  font-weight: 500;
}

.transfer-form {
  padding: 0;
}

.transfer-form .form-label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  font-size: 14px;
}

.transfer-form .form-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.transfer-form .form-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 班级作业弹窗样式 */
.homework-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.homework-stats .stat-icon.homework-total {
  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

.homework-stats .stat-icon.homework-active {
  background: linear-gradient(135deg, #00BCD4, #0097A7);
}

.loading-homework {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.loading-homework i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #9C27B0;
}

.loading-homework p {
  margin: 0;
  font-size: 16px;
}

/* 作业卡片网格 */
.homework-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.homework-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.homework-card:hover {
  border-color: #9C27B0;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(156, 39, 176, 0.2);
}

.homework-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.homework-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
  line-height: 1.4;
}

.homework-status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.homework-status-badge.ongoing {
  background: #e3f2fd;
  color: #2196F3;
}

.homework-status-badge.ended {
  background: #fce4ec;
  color: #f44336;
}

.homework-status-badge.no-deadline {
  background: #f5f5f5;
  color: #999;
}

.homework-card-body {
  margin-bottom: 16px;
}

.homework-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.homework-info-row i {
  margin-top: 2px;
  color: #9C27B0;
  min-width: 14px;
}

.homework-info-row span {
  flex: 1;
}

.homework-card-footer {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.view-progress-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.view-progress-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
}

.view-progress-btn i {
  font-size: 12px;
}

.early-end-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #f57c00, #e64a19);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.early-end-btn:hover {
  background: linear-gradient(135deg, #e64a19, #d84315);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 124, 0, 0.4);
}

.early-end-btn i {
  font-size: 12px;
}

.empty-homework {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-homework i {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
  color: #ccc;
}

.empty-homework p {
  margin: 0;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .manage-team-modal {
    width: 95vw;
  }
  
  .transfer-modal {
    width: 95vw;
  }
  
  .homework-modal {
    width: 95vw;
  }
  
  .team-stats,
  .homework-stats {
    grid-template-columns: 1fr;
  }
  
  .students-table-container {
    overflow-x: auto;
  }
  
  .students-table {
    min-width: 400px;
  }
  
  .action-buttons-cell {
    flex-direction: column;
    gap: 6px;
  }
  
  .transfer-btn,
  .delete-student-btn {
    width: 100%;
    justify-content: center;
  }
  
  .team-actions {
    flex-direction: column;
  }
  
  .homework-btn,
  .detail-btn,
  .manage-btn,
  .delete-btn {
    width: 100%;
  }
  
  .homework-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* 排名弹窗样式 */
.rank-modal {
  width: 90%;
  max-width: 1200px;
  max-height: 85vh;
  overflow-y: auto;
}

.rank-info-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  margin-bottom: 20px;
}

.rank-info-section .info-item {
  text-align: center;
  color: white;
}

.rank-info-section .label {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 5px;
}

.rank-info-section .value {
  display: block;
  font-size: 18px;
  font-weight: 600;
}

.rank-list-section {
  margin-top: 20px;
}

.section-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 600;
}

.rank-table-wrapper {
  overflow-x: auto;
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.rank-table thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.rank-table th {
  padding: 15px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
}

.rank-table tbody tr {
  border-bottom: 1px solid #eee;
  transition: background 0.3s;
}

.rank-table tbody tr:hover {
  background: #f8f9fa;
}

.rank-table tbody tr.top-rank {
  background: #fff9e6;
}

/* 🔥 提交了作业的学生 - 卡片亮起来 */
.rank-table tbody tr.submitted {
  background: #f0f9ff;
  opacity: 1;
}

/* 未提交作业的学生 - 卡片暗淡 */
.rank-table tbody tr.no-submit {
  opacity: 0.5;
  background: #f8f9fa;
}

.rank-table td {
  padding: 15px;
  font-size: 15px;
  text-align: center;
}

.rank-number {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.medal {
  font-size: 28px;
}

.no-rank {
  color: #999;
}

.student-name {
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

.score-cell {
  font-weight: 600;
}

.score-value {
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  font-size: 16px;
}

.score-excellent {
  background: #d4edda;
  color: #155724;
}

.score-good {
  background: #d1ecf1;
  color: #0c5460;
}

.score-pass {
  background: #fff3cd;
  color: #856404;
}

.score-fail {
  background: #f8d7da;
  color: #721c24;
}

.score-zero {
  background: #e2e3e5;
  color: #6c757d;
}

.empty-rank {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* 操作列样式 */
.action-cell {
  text-align: center;
}

/* 查看代码按钮样式 */
.view-code-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.view-code-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

.view-code-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.view-code-btn:disabled {
  background: #e2e3e5;
  color: #6c757d;
  cursor: not-allowed;
  box-shadow: none;
}

.view-code-btn i {
  font-size: 14px;
}

.empty-rank i {
  font-size: 48px;
  margin-bottom: 10px;
  display: block;
}

/* 题目代号表头样式 */
.question-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 700;
  font-size: 16px;
  min-width: 80px;
  text-align: center;
  padding: 12px 10px 8px 10px;
  border-bottom: none;
}

/* 统计信息行样式 */
.stats-row {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 题目统计信息表头样式 */
.question-stats-header {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 13px;
  min-width: 80px;
  text-align: center;
  padding: 8px 10px 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-family: 'Courier New', monospace;
}

/* 单个题目得分单元格样式 */
.question-score-cell-single {
  padding: 12px 10px !important;
  text-align: center;
  min-width: 80px;
}

/* 单个题目得分显示样式 */
.question-score-single {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  display: inline-block;
  min-width: 65px;
  white-space: nowrap;
}

/* 未提交时的显示 */
.no-score-text {
  font-size: 14px;
  color: #999;
  font-style: italic;
}

/* 题目得分颜色样式 */
.question-score-full {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.question-score-good {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.question-score-pass {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.question-score-fail {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.question-score-zero {
  background: #e2e3e5;
  color: #6c757d;
  border: 1px solid #d6d8db;
}

/* 响应式设计 - 题目得分 */
@media (max-width: 768px) {
  .question-header {
    font-size: 14px;
    min-width: 60px;
    padding: 10px 8px 6px 8px;
  }
  
  .question-stats-header {
    font-size: 11px;
    min-width: 60px;
    padding: 6px 8px 10px 8px;
  }
  
  .question-score-cell-single {
    min-width: 60px;
    padding: 10px 6px !important;
  }
  
  .question-score-single {
    font-size: 12px;
    padding: 4px 6px;
    min-width: 50px;
  }
  
  .no-score-text {
    font-size: 12px;
  }
}

/* 学生代码查看弹窗样式 */
.code-modal {
  max-width: 1200px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.loading-section {
  padding: 80px 40px;
  text-align: center;
  color: #3498db;
}

.loading-section i {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.code-content {
  padding: 32px;
  background: #f8f9fc;
}

.student-info-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 32px 40px;
  border-radius: 12px;
  margin-bottom: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.25);
}

.student-info-section .info-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.student-info-section .label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.student-info-section .value {
  font-size: 19px;
  color: white;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.score-highlight {
  color: #ffd700;
  font-size: 24px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-weight: 900;
}

.questions-code-section {
  margin-top: 32px;
}

.questions-code-section .section-title {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 28px;
  padding-bottom: 16px;
  padding-left: 16px;
  border-left: 5px solid #667eea;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.question-code-card {
  background: white;
  border: none;
  border-radius: 16px;
  margin-bottom: 32px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.question-code-card:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.code-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 36px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  min-height: 80px;
}

.code-card-header .header-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.question-number {
  font-weight: 700;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.25);
  padding: 8px 20px;
  border-radius: 24px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  white-space: nowrap;
}

.question-name {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score-badge {
  padding: 10px 24px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 140px;
  text-align: center;
}

.score-badge.score-excellent {
  background: #d4edda;
  color: #155724;
  border: 2px solid #c3e6cb;
}

.score-badge.score-good {
  background: #d1ecf1;
  color: #0c5460;
  border: 2px solid #bee5eb;
}

.score-badge.score-pass {
  background: #fff3cd;
  color: #856404;
  border: 2px solid #ffeaa7;
}

.score-badge.score-fail {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
}

.score-badge.score-zero {
  background: #e2e3e5;
  color: #6c757d;
  border: 2px solid #d6d8db;
}

.code-content-wrapper {
  padding: 32px 36px;
  background: #f8f9fa;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
}

.code-label {
  font-size: 16px;
  font-weight: 700;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 10px;
}

.code-label::before {
  content: '💻';
  font-size: 20px;
}

.copy-code-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(52, 152, 219, 0.35);
  white-space: nowrap;
}

.copy-code-btn:hover {
  background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(52, 152, 219, 0.45);
}

.copy-code-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(52, 152, 219, 0.35);
}

.copy-code-btn i {
  font-size: 15px;
}

.code-block {
  margin: 0;
  padding: 28px 32px;
  background: #282c34;
  color: #abb2bf;
  border-radius: 12px;
  overflow-x: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 15px;
  line-height: 2;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid #3e4451;
  min-height: 200px;
}

.code-block code {
  white-space: pre;
  display: block;
  color: #e06c75;
}

.no-code-message {
  padding: 60px 32px;
  text-align: center;
  color: #95a5a6;
  background: #f8f9fa;
  border-radius: 8px;
}

.no-code-message i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
  color: #bdc3c7;
}

.no-code-message p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.no-data-message {
  padding: 80px 40px;
  text-align: center;
  color: #95a5a6;
}

.no-data-message i {
  font-size: 64px;
  margin-bottom: 24px;
  display: block;
  color: #bdc3c7;
}

.no-data-message p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

/* 学生代码弹窗响应式设计 */
@media (max-width: 768px) {
  .code-modal {
    max-width: 95%;
    margin: 20px auto;
    border-radius: 12px;
  }
  
  .code-content {
    padding: 20px;
  }
  
  .student-info-section {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  
  .student-info-section .value {
    font-size: 16px;
  }
  
  .questions-code-section .section-title {
    font-size: 16px;
    margin-bottom: 20px;
  }
  
  .question-code-card {
    margin-bottom: 24px;
    border-radius: 10px;
  }
  
  .code-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
  }
  
  .code-card-header .header-left {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .score-badge {
    width: 100%;
    text-align: center;
    padding: 8px 16px;
  }
  
  .code-content-wrapper {
    padding: 20px;
  }
  
  .code-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .copy-code-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 18px;
  }
  
  .code-block {
    padding: 16px;
    font-size: 13px;
    line-height: 1.6;
  }
}
</style> 